﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel"
  :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg"
  :commonConfig="commonConfig">
    <div :style="myConfig.myStyle">
      <span class="icon-show">
        <span @click="handleEdit" v-if="selectedValue && selectedValue.length > 0">
          <i class="el-icon-document-copy">
            <i class="icon-text">{{ selectedValue ? getFileName(selectedValue[0]) : ''}}
            <el-button type="text" v-if="selectedValue && selectedValue.length > 1">...</el-button>
            </i>
          </i>
        </span>
        <span v-else>
          <el-button type="success" v-if="myConfig.isEnable" round @click="handleEdit">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </span>
      </span>
    </div>
    <el-dialog v-drag
        :closeOnClickModal="false"
        :visible.sync="showPop"
        append-to-body
        width="50%"
        class="pop"
        :before-close="handleShowPopClose">
      <el-form>
        <el-form-item>
          <el-upload
          ref="upload"
          multiple
          list-type="text"
          :disabled="!myConfig.isEnable"
          :action="uploadUrl"
          :auto-upload="false"
          accept="*"
          name="file"
          :limit="myConfig.other.limit?myConfig.other.limit:10"
          :show-file-list="true"
          :file-list="fileList"
          :on-success="handleSuccess"
          :on-preview="handleDownload"
          :before-remove="handleRemove"
          :on-change="handleChange"
          :on-exceed="handleExceed">
            <el-button size="small" type="primary" v-if="myConfig.isEnable">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitUpload" v-if="myConfig.isEnable">确定</el-button>
          <el-button type="info" @click="cancelUpload" v-if="myConfig.isEnable">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
export default {
  components: {
    baseComponent, baseUI
  },
  extends: baseComponent,
  mounted () {
  },
  data () {
    return {
      uploadUrl: $URL.IMG_UPLOAD_URL + '/fileset/upload_stream',
      showPop: false,
      fileList: [],
      isClickSubmit: false,
      imgViewerVisible: false,
      hasFileReady: false
    }
  },
  methods: {
    isDataComponent () {
      return true
    },
    handleRemove (file, fileList) {
      if (!file.url) return true
      if (!file.response && file.url.startsWith('blob:')) return true
      let url = ''
      if (file.response) {
        url = file.response.result.file_down_url
      } else {
        url = file.url
      }
      return this.$api.recycle2FileService(url).then(data => {
        if (this.selectedValue) {
          let index = this.selectedValue.indexOf(url + '/name/' + file.name)
          if (index > -1) {
            this.selectedValue.splice(index, 1)
          }
        }
      })
    },
    handleDownload (file) {
      if (file.url && !file.url.startsWith('blob:')) {
        this.$api.downloadFromFileService(file.url, file.name)
      }
    },
    handleSuccess (response, file, fileList) {
      let rep = response
      if (rep.error) {
        this.$message.error('上传失败:' + rep.error)
        return false
      }
      if (rep.result.code !== 'success') {
        this.$message.error('上传失败:' + rep.result.msg)
        return false
      }
      if (!this.selectedValue) {
        this.selectedValue = []
      }
      this.selectedValue.push(response.result.file_down_url + '/name/' + file.name)
      if (this.isClickSubmit) {
        let f = fileList.find(f => {
          if (f.status !== 'success') {
            return true
          } else if (f.response.result.code !== 'success') {
            return true
          } else {
            return false
          }
        })
        if (!f) {
          this.showPop = false
        }
      }
    },
    handleChange (file, fileList) {
      console.debug(file)
      if (file.status === 'ready') {
        this.hasFileReady = true
      }
    },
    handleExceed (file, fileList) {
      this.$message.error('超过上传最高限制，当前只能上传' + this.myConfig.other.limit + '张图片')
    },
    handleShowPopClose () {
      this.showPop = false
    },
    handleEdit () {
      this.fileList = []
      if (this.selectedValue) {
        this.selectedValue.forEach(item => {
          this.fileList.push({
            name: this.getFileName(item),
            url: this.getFileUrl(item)
          })
        })
      }
      this.hasFileReady = false
      this.isClickSubmit = false
      this.showPop = true
    },
    submitUpload () {
      if (this.hasFileReady) {
        this.$refs.upload.submit()
        this.isClickSubmit = true
      } else {
        this.showPop = false
      }
    },
    cancelUpload () {
      this.showPop = false
    },
    closeImgViewer () {
      this.imgViewerVisible = false
    },
    getFileName (url) {
      if (!url) return ''
      let arr = url.split('/name/')
      return arr.length > 1 ? arr[1] : '未知文件'
    },
    getFileUrl (url) {
      if (!url) return ''
      let arr = url.split('/name/')
      return arr[0]
    }
  },
  watch: {
  },
  computed: {
  }
}
</script>
<style lang="scss">
 .icon-show {
  font-size: 20px;
  cursor: pointer;
}
.icon-text {
  font-size: 14px;
}

</style>
